<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
         body{
            background-color: #fff;
        }
  .contentBox {
            width: 700px;
            height: 340px;
            position: absolute;
            top: 0%;
            left: 0;
            bottom: 0;
            right: 0;
            margin: 0 auto;
            /* background-color: red; */
            border: 1px solid #93918f;

        }

        .contentBox2 {
            width: 700px;
            height: 340px;
            position: absolute;
            top: 30%;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto auto;
            /* background-color: red; */
            /* border:1px solid red; */
        }

        p {
            font-size: 20px;
        }

        aside {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5%;
            font-size: 25px;
            font-weight: 500 !important;
        }

        .container {
            display: flex;
            justify-content: left;
            align-items: left;
            flex-direction: column;
            line-height: 10px;
            margin-left: 4%;

        }

        .footer {
            display: flex;
            justify-content: right;
            align-items: center;
            flex-direction: column;
            margin-left: 40%;
            line-height: 10px;
        }

        .row {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40px;
            margin-top: 10px;
            /* background-color: red; */
        }

        .inputbox1 {
            width: 80px;
            height: 25px;
            font-size: 20px;
            border: none;
            border-bottom: 1px solid #000;

        }

        .inputbox2 {
            width: 135px;
            height: 25px;
            border: none;
            border-bottom: 1px solid #000;

        }

        .input-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .txt2 {
            margin-left: 300px;
        }

        .phone {
            margin-left: 320px;
        }

        .btn_box {
            margin-left: 46%;

        }

        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            margin-left: 20px;

        }

        #btnPrint {
            background-color: #2f81ff;
            margin-right: 30px;

        }

        #btnBack {
            background-color: #ff8400;
        }

        .bigBox {
            position: absolute;
            top: 0%;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto auto;
            width: 700px;
            height: 800px;
            /* border: 1px solid #93918f; */
            margin-top: 2%;
        }

        .btn_box {
            position: absolute;
            bottom: -5%;


        }

        .contentBox2 {
            margin-top: 30%;
        }

        #ftBox {
            position: absolute;
            top: 120%;
            bottom: 0px;
            right: 0px;
            left: 2%;
        }

        .image {
            position: relative;
        }

        #bg {
            position: absolute;
            top: 10%;
            bottom: 0px;
            right: 5%;
            left: 0px;
            margin: 10px -40px;
        }

    </style>
    <style media="print">
      
        @page {
            size: auto;
            /* auto is the initial value */
            margin: 0mm;
            /* this affects the margin in the printer settings */
        }
    </style>

    <title>借条</title>

</head>

<body>
    <div id="outBox">
        <div class="image" id="a">

        </div>
        <div class="bigBox" id="priBox">
            <div class="contentBox">
                <aside>借 条</aside>
                <div class="container">

                    <div class="row">
                        <div class="input-box ">
                            <p class="">&nbsp;&nbsp;本人</p>
                            <input type="text" autocomplete="off" class="layui-input inputbox1" readonly
                                name="recordname" id="recordname" />
                        </div>
                        <div class="input-box ">
                            <p class=" ">身份证号：</p>
                            <input type="text" autocomplete="off" class="layui-input inputbox2" name="idNumber"
                                id="idNumber" />
                        </div>
                        <div class="input-box idcard">
                            <p class=" idcard">因要将社保关系</p>
                        </div>

                    </div>
                    <div class="row">
                        <div class="input-box ">
                            <p class="txt">从王舍人社保中心转到__________________</p>
                        </div>
                        <div class="input-box ">
                            <p class="txt">，现将档案带走。</p>
                        </div>


                    </div>
                    <p class="txt2 phone">电话：</p>
                    <p class="txt2">借档人:</p>

                </div>

                <div class="footer">

                    <p> 年 &nbsp;&nbsp; &nbsp; &nbsp;月&nbsp; &nbsp;&nbsp;&nbsp;日</p>
                </div>


            </div>

            <div class="contentBox contentBox2">
                <aside>借 条</aside>
                <div class="container">

                    <div class="row">
                        <div class="input-box ">
                            <p class="">本人</p>
                            <input type="text" autocomplete="off" class="layui-input inputbox1" readonly name=""
                                id="" />
                        </div>
                        <div class="input-box ">
                            <p class=" ">身份证号：________________</p>
                            <!-- <input type="text" autocomplete="off" class="layui-input inputbox2" readonly name="" id="" /> -->
                        </div>
                        <div class="input-box idcard">
                            <p class=" idcard">因要将社保关系</p>
                        </div>

                    </div>
                    <div class="row">
                        <div class="input-box ">
                            <p class="txt">从王舍人社保中心转到__________________</p>
                        </div>
                        <div class="input-box ">
                            <p class="txt">，现将档案带走。</p>
                        </div>


                    </div>
                    <p class="txt2 phone">电话：</p>
                    <p class="txt2">借档人:</p>

                </div>

                <div class="footer">
                    <p> 年 &nbsp;&nbsp; &nbsp; &nbsp;月&nbsp; &nbsp;&nbsp;&nbsp;日</p>
                </div>

            </div>
            <div class="ftBox" id="ftBox" style="display: none;margin-top: 90px;">

            </div>
            <div class="btn_box">

                <div class="layui-btn avoid-this" id="btnPrint">
                    打印
                </div>
                <!-- <div class="layui-btn avoid-this" id="btnBack">
                    返回
                </div> -->

            </div>
            <div style="position: relative;top:105%; height: 20px;">

            </div>
        </div>
    </div>



    <!--js逻辑-->
    <script src="../../../lib/layui/layui.js"></script>
    <script src="../../../plugins/jquery/jquery-2.1.0.js"></script>
    <script src="../../../plugins/jquery/jQuery.print.js"></script>
    <script src="../../../js/print.js"></script>

    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>

    <script>
        layui.use(["element", "table", "form", "jquery", "okLayer", "okUtils"], function () {
            let table = layui.table;
            let form = layui.form;
            let okLayer = layui.okLayer;
            let okUtils = layui.okUtils;
            let $ = layui.jquery;
            // let print = layui.jQuery.print;
            okLoading.close($);
            // 数据渲染
            okUtils.ajax("../../../data/navs.json", "get", true).done(function (res) {
                console.log(res)
                var usernameVal = res.data[0].recordname
                console.log(usernameVal)
                var idVal = res.data[0].idnumber
                var textVal = res.data[0].title


                $("#recordname").val(usernameVal);
                $("#idNumber").val(idVal);
                $("#txt").val(textVal);

            }).fail(function (error) {
                console.log(error)
            });
        })
    </script>

</body>

</html>